<template>
  <div style="margin-bottom:66px;margin-top:50px">
      <top :pageTitle="pageTitle"></top>
        <div>
            <span style="font-size:16px;font-weight:600;display:block;width:92vw;margin:0 auto;height:50px;line-height:50px">售后类型：{{serviceType}}</span>
            <div style="font-size:15px" class="serviceStep">
                <p style="margin-bottom:12px">售后进度当前的一步</p>
                <p>售后进度当前的一步的步骤描述哦</p>
            </div>
        </div>
        <div style="background:#ffffff;padding:10px 0;margin-top:15px">
            <span style="font-size:16px;font-weight:600;display:block;width:92vw;margin:0 auto;height:50px;line-height:50px">售后商品</span>
            <list v-for="(data,i) in dataList" :key='i' :data='data' v-if="i < 2" style="background:#f5f5f5"></list>   
        </div>
        <service-apply :price="price"  :reason="reason" :problem="problem" style="margin-top:15px;background:#ffffff"></service-apply>
        <service-code :time="time" :code="code" style="background: #ffffff;margin-top:15px;padding:0 15px"></service-code>
        <customer-service style="position:fixed;z-index:100;bottom:0px"></customer-service>
  </div>
</template>
<script>
import axios from 'axios';
import List from '@/components/customerService/list.vue';
import ServiceApply from '@/components/serviceDetail/serviceApply.vue';
import ServiceCode from '@/components/serviceDetail/serviceCode.vue';
import CustomerService from '@/components/common/customService.vue';
import Top from '@/components/common/top.vue';
export default {
    name:'serviceDetail',
    components:{
        'List':List,
        'ServiceApply':ServiceApply,
        'ServiceCode':ServiceCode,
        'CustomerService':CustomerService,
        'Top':Top
    },
    data () {
        return {
            serviceType:'仅退款、换货、退货退款',
            dataList:[
            {id:1,imgUrl:'https://img.alicdn.com/bao/uploaded/i3/3085960453/TB2bmQFsVGWBuNjy0FbXXb4sXXa_!!3085960453-0-item_pic.jpg',size:'xl',color:'红色',num:1,price:300,title:'冬季羽绒服貂毛'},
            {id:2,imgUrl:'https://img.alicdn.com/bao/uploaded/i3/3085960453/TB2bmQFsVGWBuNjy0FbXXb4sXXa_!!3085960453-0-item_pic.jpg',size:'xxl',color:'白色',num:1,price:299,title:'冬季羽绒服貂毛'},
            {id:3,imgUrl:'https://img.alicdn.com/bao/uploaded/i3/3085960453/TB2bmQFsVGWBuNjy0FbXXb4sXXa_!!3085960453-0-item_pic.jpg',size:'l',color:'黑色',num:1,price:358,title:'冬季羽绒服貂毛'},
            {id:4,imgUrl:'https://img.alicdn.com/bao/uploaded/i3/3085960453/TB2bmQFsVGWBuNjy0FbXXb4sXXa_!!3085960453-0-item_pic.jpg',size:'s',color:'绿色',num:1,price:198,title:'冬季羽绒服貂毛'}
            ],
            price:1200,
            reason:'尺码不对',
            problem:'图片与实物不符',
            time:'2018-09-22 10:24:00',
            code:'2018jigwf784',
            pageTitle:'售后详情'
        }
    },
    computed:{
        
    },
    methods:{
        
    },
    created() {
        this.id=this.$route.query.id;
        console.log(this.id)
    }
}
</script>
<style lang='scss'>
    .serviceStep{
        background:#f5f5f5;
        width:92vw;
        margin:0 auto;
        padding: 17px 11px;
        p{
            color:#333333;
            dispaly:block;
            font-size:15px;
        }
    }
</style>